<script setup lang="ts">
import { ClassApi } from '@/apis'
import ClassCard from '@/components/ClassCard.vue'
import ProgressBar from '@/components/ProgressBar/index.vue'

const props = defineProps<{
  status: number
}>()

const query = reactive({
  classStatus: [props.status],
})

const { reload, loadmore, records, status, contentText } = usePagination<ClassApi.ClassInfoResp>(page => ClassApi.getClassInfoPage({ ...query, ...page }))

onReachBottom(() => {
  loadmore()
})

onPullDownRefresh(async () => {
  await reload()
  uni.stopPullDownRefresh()
})

const gotoDetail = (item) => {
  uni.navigateTo({
    url: `/pages/class/detail?id=${item.id}`,
  })
}
</script>

<template>
  <view class="bg-#f8f8f8 px py pt-1">
    <view v-for="(item, index) in records" :key="index" class="mt-[24rpx]" @click="gotoDetail(item)">
      <ClassCard :item="item">
        <template #bottom>
          <view class="mt w-full flex-row-start-center">
            <text class="text-26rpx text-secondary">
              课程进度
            </text>
            <view class="ml flex-1">
              <ProgressBar :text="`${item.completedLessonCount}/${item.totalLessonCount}`" :progress="item.completedLessonCount * 100 / item.totalLessonCount" />
            </view>
          </view>
        </template>
      </ClassCard>
    </view>
    <view v-if="!records || !records.length">
      <wd-status-tip image="content" tip="暂无数据" />
    </view>
    <uni-load-more v-if="records && records.length" :status="status" :content-text="contentText" />
  </view>
</template>

<style lang="scss" scoped>
</style>
